<template lang="pug">
  d2-container(:filename="filename")
    el-row
        el-col(:span="showNewPanel ? 18 : 24")
            el-card(shadow="never")
                div(slot="header",class="clearfix")
                    span 胰岛素泵资料卡
                    div(class="pull-right",style="margin-top:-8px")
                        el-button(type="text",@click="newClick")
                          span 新建
                        refresh-button(:loading="querying",@click="getPumpSaleInfos")

                pump-sale-info-list(ref="pumpSaleInfoList",:is-querying="querying",@edit="editClick")
        el-col(:span="5",:offset="1", v-if="showNewPanel")
            pump-sale-info-create(@success="getPumpSaleInfos",@close="showNewPanel=false",v-if="!editId")
            pump-sale-info-edit(@success="getPumpSaleInfos",@close="editClose",:id="editId",v-else)
</template>

<script>
import Vue from "vue";
import { RefreshButton } from "@/components/aws-comp";
Vue.component(RefreshButton.name, RefreshButton);

import PumpSaleInfoCreate from "./PumpSaleInfoCreate";
Vue.component(PumpSaleInfoCreate.name, PumpSaleInfoCreate);

import PumpSaleInfoEdit from "./PumpSaleInfoEdit";
Vue.component(PumpSaleInfoEdit.name, PumpSaleInfoEdit);

import PumpSaleInfoList from "./PumpSaleInfoList";
import { numericLiteral } from 'babel-types';
Vue.component(PumpSaleInfoList.name, PumpSaleInfoList);

export default {
  name: "pump-sale-info-index",
  data() {
    return {
      filename: __filename,
      showNewPanel: false,
      querying: false,
      editId: null
    };
  },
  methods: {
    getPumpSaleInfos() {
      this.$refs.pumpSaleInfoList.getPumpSaleInfos();
    },
    newClick(){
      this.editId = null;
      this.showNewPanel = true;
    },
    editClick(info) {
      this.editId = info.id;
      this.showNewPanel = true;
    },
    editClose() {
      this.showNewPanel = false;
      this.editId = null;
    }
  },
  created(){
  }
};
</script>
